import React, { Component } from 'react';
import axios from 'axios'
import './App.css'
// 类组件
class App extends Component {
  state = {
    mes: 'hello React !!!!',
    site: 'http://www.baidu.com',
    count: 1,
    list: [],
    tabs: [],
    isShow: true,
    activeIndex: 0
  }
  componentDidMount() {
    this.getList()
    this.getTabs()
  }

  async getList() {
    const resp =  await axios.get('/api/mock/list')
    // 修改state 
    this.setState({
      list: resp.data.data
    })
  }
  async getTabs() {
    const resp =  await axios.get('/api/mock/tabs')
    // 修改state 
    this.setState({
      tabs: resp.data.data
    })
  }
  add() {
    const { count } = this.state
    // 修改state的唯一方法 
    // 调用setState 函数
    this.setState({
      count: count + 1
    })
  }

  changeIsShow() {
    const { isShow } = this.state

    this.setState({
      isShow: !isShow
    })
  }
  
  render() {
    // 解构数据
    const { mes, site, count, list, isShow, tabs, activeIndex } = this.state
    // 这个是jsx， jsx 是js 扩展语法
    return (
      <div> 
        {/* 选项卡 */}
        <div className="title">
          {
            tabs.map((item, index) => {
              return <b key={ item.id } className={ activeIndex === index ? 'active': '' }
                onClick={ () => this.setState({ activeIndex: index }) }
              >{ item.title }</b>
            })
          }
        </div>

        <div>
          {
            tabs.length && tabs[activeIndex].children.map(item => {
              return <span key={item.id}>{ item.title }</span>
            })
          }
        </div>
        <h1>
          这里jsx 语法
        </h1>
        <h2 className="qwe">{ mes }</h2>
        <a href={ site }>百度一下</a>
        <hr />
        <h1>{ count }</h1>
        <button onClick={ () => this.add()  }>点我+1</button>
        {/* 渲染列表 */}
        <ul>
          {
            list.map(item => {
              return <li key={ item.id }>{ item.title }</li>
            })
          }
        </ul>
        {/* 条件渲染 */}
        <button onClick={ () =>this.changeIsShow()  }>{ isShow ? '关闭' : '显示' }</button>
          {
            isShow &&  <div>
                        <h1>123132</h1>
                        <h1>123132</h1>
                        <h1>123132</h1>
                        <h1>123132</h1>
                        <h1>123132</h1>
                      </div>
          }
      </div>
    );
  }
}

export default App;
